<script setup>
import useHomeStore from '@/stores/modules/home'
import HouseItemV3 from '@/components/house-item-v3/house-item-v3.vue'
import HouseItemV9 from '@/components/house-item-v9/house-item-v9.vue'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'

const homeStore = useHomeStore()
const { houselist } = storeToRefs(homeStore)

// 点击卡片跳转到对应详情
const router = useRouter()
const handleItemClick = (item) => {
  const houseId = item.houseId
  router.push({
    path: '/detail',
    query: {
      houseId,
    },
  })
}
</script>

<template>
  <div class="home-content">
    <h2 class="title">热门精选</h2>
    <div class="list">
      <template v-for="item in houselist" :key="item.data.houseId">
        <HouseItemV9
          @click="handleItemClick(item.data)"
          v-if="item.discoveryContentType === 9"
          :item-data="item.data"
        />
        <HouseItemV3
          @click="handleItemClick(item.data)"
          v-else-if="item.discoveryContentType === 3"
          :item-data="item.data"
        />
      </template>
    </div>
  </div>
</template>

<style lang="less" scoped>
.home-content {
  padding: 10px 8px;
  .title {
    font-size: 22px;
    padding: 10px;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
